<!-- 取消退换票组件 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="600px"
    @close="onClose"
  >
    <div class="dialog-content">
      <!-- 退换票信息 -->
      <div class="info-section">
        <h3>退换票信息</h3>
        <table class="info-table">
          <tr>
            <td>发票种类</td>
            <td>
              <span>{{
                dict.invoice_category[Number(formData.invoiceCategory)]
              }}</span>
            </td>
            <td>发票类型</td>
            <td>
              <span>{{ dict.invoice_type[Number(formData.invoiceType)] }}</span>
            </td>
          </tr>
          <tr>
            <td>姓名</td>
            <td>{{ formData.studentName }}</td>
            <td>身份证号</td>
            <td>{{ formData.idNumber }}</td>
          </tr>
          <tr>
            <td>单位</td>
            <td>{{ formData.unitName }}</td>
            <td>单位统一信用代码</td>
            <td>{{ formData.socialCreditCode }}</td>
          </tr>
          <tr>
            <td>联系方式</td>
            <td>{{ formData.phonenumber }}</td>
            <td>发票金额</td>
            <td>{{ formData.invoiceAmount }}</td>
          </tr>
          <tr>
            <td>发票编号</td>
            <td colspan="3">{{ formData.invoiceNumber }}</td>
          </tr>
          <tr>
            <td>申请原因</td>
            <td colspan="3">{{ formData.invoiceRefundReason }}</td>
          </tr>
        </table>
      </div>

      <!-- 确认提示 -->
      <div class="confirm-message" style="text-align: center; margin-top: 40px">
        确定取消该退换票申请？
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "CancelExchangeDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      required: true,
    },
    dict: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      dialogTitle: "取消退换票",
    };
  },
  methods: {
    submit() {
      this.$emit("submit", this.formData);
    },
    onClose() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped>
.dialog-content {
  padding: 20px;
}

.info-section {
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

.info-section h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  color: #303133;
  position: relative;
  padding-left: 12px;
}

.info-section h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  height: 16px;
  width: 4px;
  background-color: #f56c6c;
  border-radius: 2px;
}

.info-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  table-layout: fixed;
}

.info-table tr:last-child td {
  border-bottom: none;
}

.info-table td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  word-wrap: break-word;
}

.info-table td:first-child {
  width: 120px;
  font-weight: 600;
  color: #606266;
  background-color: #f5f7fa;
}

.info-table td:last-child {
  color: #303133;
  width: auto;
}

.confirm-message {
  font-size: 16px;
  color: #303133;
  margin: 30px 0 20px;
  font-weight: 500;
  text-align: center;
}

.confirm-message::before {
  content: "⚠️";
  margin-right: 8px;
}

.dialog-footer {
  text-align: right;
  padding: 10px 20px 20px;
}

/* 按钮样式优化 */
.dialog-footer ::v-deep .el-button {
  padding: 8px 20px;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dialog-content {
    padding: 15px;
  }

  .info-table td {
    padding: 8px 6px;
    font-size: 13px;
  }

  .info-table td:first-child {
    width: 90px;
  }

  .confirm-message {
    font-size: 14px;
    margin: 20px 0 15px;
  }
}
</style>


